<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://www.w3cways.com/demo/vconsole/vconsole.min.js?v=2.2.0"></script>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<!-- <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> -->
	 <!-- <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script> -->
	<style type="text/css">
        #app div{
            margin-top:15%; 
            height: 10%;
        }      
        #app div:nth-of-type(1){
            margin-top:30%; 
        }        
        #app span{
            font-size: 70px;
        }
        #app button{
            width: 35%;
            height: 100px;
            font-size: 50px;
        }
        .sportActionArea button:nth-of-type(1){
            margin-right: 10%;
        }
        .sportActionArea button:nth-of-type(2){
            margin-left: 10%;
        }
        #app select{
            width: auto;
            padding: 0;
            font-size: 70px;
            margin: 0;
            -webkit-appearance: none;
        }
        .formItem{
            margin-top: 10%;
        }
        .formItem span,.formItem input,.formItem button{
            font-size:xx-large;
            font-weight:bold;
        }
        .dialog{
            width:80%;
            border:solid 1px #000;
            background-color:#FFFFFF;
            position:absolute;
            text-align:center;
            left:10%;
            top:20%;
        }
    </style>
</head>
<body>
	<center>
	<div id="app">	
        <div class="mySelect">
            <span>运动方式:</span>
            <select v-model="selected" v-on:change="selectType">
            <option v-for="item in selectArray" v-bind:value="item.value">
                {{item.text}}
            </option>
        </select>
        </div>
		<div class="sportActionArea">
			<button type="button" v-on:click="startSport">开始运动</button>
			<button type="button" v-on:click="stopSport">结束运动</button>
		</div>
        <div>
            <button type="=button" v-on:click="changeBodyMsg">修改</button>
        </div>
		<div>
			<span >{{sportCount}}</span>
		</div>
		<div>
			<span >{{heartCount}}</span>
		</div>
        <div class="dialog" style="height: auto" v-if="bodyMsgSeen">
            <h1>请填写您的身体信息</h1>
            <div class="formItem">
                 <span>性别：</span>
                 <div style='display:inline;' v-for='item in items' >
                    <input type='radio' name='sex' :checked='item.checked' v-model='sex' :value='item.value'><span>{{item.display}}</span>
                </div>
            </div>
            <div  class="formItem">
                <span>身高：</span>
                <input type="text" v-bind:value="bodyHeight" oninput = "value=value.replace(/[^\.\d]/g,'')">
            </div>
            <div  class="formItem">
                <span >体重：</span>
                <input  type="text" v-bind:value="bodyWeight" oninput = "value=value.replace(/[^\.\d]/g,'')">
            </div>
            <div  class="formItem">
                <span >年龄：</span>
                <input type="text" v-bind:value="age" oninput = "value=value.replace(/[^\.\d]/g,'')">
            </div>  
            <div  class="formItem">
                <button type="button" v-on:click="bodyMsgNextStep">下一步</button>    
            </div> 
            <div style="clear: both;"></div>
        </div>
	</div>
</center>
	
	<script type="text/javascript">
		var app = new Vue({
  			el: '#app',
  			data: {
                selected: 1,//select选中的值
                selectArray:[
                    {text: '蹲着滚',value:1},
                    {text: '站立滚',value:2}
                ],
    			sportCount: '运动次数:',
    			heartCount: '心率:',
                bodyMsgSeen:false
  			},
  			methods: {
    			startSport: function () {//点击开始运动之后的调用函数
     			// 	 if(myCurrentDeviceId!=null){
    				// 	window.hilink.writeBLECharacteristicValue(myCurrentDeviceId, serviceUuid, writeUuid, 'FEA30101', 'writeDataCallback');//打开数据上传功能
    				// 	window.hilink.writeBLECharacteristicValue(myCurrentDeviceId, serviceUuid, writeUuid, 'FEA90101', 'writeDataCallback');//开始运动
    				// }
    			},
    			stopSport: function () {//点击停止运动之后的调用函数
     			// 	 if(myCurrentDeviceId!=null){
    				// 	window.hilink.writeBLECharacteristicValue(myCurrentDeviceId, serviceUuid, writeUuid, 'FEA30100', 'writeDataCallback');//关闭数据上传功能
    				// 	window.hilink.writeBLECharacteristicValue(myCurrentDeviceId, serviceUuid, writeUuid, 'FEA90100', 'writeDataCallback');//停止运动
    				// }
    			},
                selectType:function(){//改变运动方式之后触发的函数
                    // if(myCurrentDeviceId!=null){
                    //     window.hilink.writeBLECharacteristicValue(myCurrentDeviceId, serviceUuid, writeUuid, 'FEA002050'+app.selected, 'writeDataCallback');//修改设备运动方式
                    // }
                },
                changeBodyMsg:function(){//点击修改身体信息按钮之后触发的函数
                    this.bodyMsgSeen=true;
                }
    		}
		});
	</script>
</body>
</html>